<!-- Web端登录界面（管理员+后厨） -->
<template>
  <div>
    <div class="登录主卡片">
      <p class="登录文本">登录</p>
      <img src="../assets/湖底捞logo.png" class="logo" />
      <el-input
        v-model="admin.account"
        maxlength="11"
        placeholder="请输入账号"
        clearable
        class="账号输入框"
      />
      <el-input
        v-model="admin.password"
        placeholder="请输入密码"
        show-password
        class="密码输入框"
      />

      <el-checkbox v-model="admin.remember" label="记住我" class="记住我" />

      <el-button @click="cookLoginHandler" type="primary" class="后厨登录按钮">
        <p class="后厨登录文本">后厨登录</p>
      </el-button>

      <el-button @click="adminLoginHandler" class="管理员登录按钮">
        <img src="../assets/锁定.png" class="管理员logo" />
        <p class="管理员登录文本">管理员登录</p>
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, inject } from "vue";
import { CookLoginStore } from "../stores/CookLoginStore";
import { defineComponent } from "vue";
import globalMsg from "../global.js";
import { ElMessage } from "element-plus";
import { useRouter, useRoute } from "vue-router"; //页面跳转第一步：引入，便于成功登录，跳转到下一个页面（第0步，修改router.js）

const axios = inject("axios"); //用于访问服务端
const cookLoginStore = CookLoginStore(); //实例化

const router = useRouter();
const route = useRoute(); //页面跳转第二步：创建实例

// let rules = { //账号，密码的输入规则
//     account: [
//         { required: true, message: "请输入账号", trigger: "blur" },
//         { min: 3, max: 12, message: "账号长度应在4至12个字符", trigger: "blur" },
//     ],
//     password: [
//         { required: true, mseesage: "请输入密码", trigger: "blur" },
//         { min: 6, max: 18, message: "密码长度应在6至18个字符", trigger: "blur" }
//     ]
// };

const admin = reactive({
  //定义一个对象
  account: localStorage.getItem("account") || "",
  password: localStorage.getItem("password") || "",
  remember: localStorage.getItem("remember") == 0,
});

const cook = reactive({
  account: localStorage.getItem("account") || "",
  password: localStorage.getItem("password") || "",
  remember: localStorage.getItem("remember") == 0,
});

const cookLoginHandler = async () => {
  cook.account = admin.account;
  cook.password = admin.password;
  cook.remember = admin.remember;

  let result = await axios.post("/admin/login", {
    account: cook.account,
    password: cook.password,
  }); //前后端对接时改一下这个url，和server的AdminRouter（这个后厨登录是依据B站明明明歌的管理员登录改的）
  console.log(result);
  if (result.data.code == 200) {
    // 登录成功
    cookLoginStore.token = result.data.data.token;
    cookLoginStore.account = result.data.data.account;
    cookLoginStore.id = result.data.data.id;
    ElMessage({
      message: "后厨登录成功^_^",
      type: "success",
    });
    if (cook.remember) {
      localStorage.setItem("account", cook.account);
      localStorage.setItem("password", cook.password);
      localStorage.setItem("remember", cook.remember ? 1 : 0);
    } else {
      localStorage.setItem("account", "");
      localStorage.setItem("password", "");
      localStorage.setItem("remember", cook.remember ? 0 : 1);
    }
    console.log("localStorage.account: " + localStorage.getItem("account"));
    console.log("localStorage.password: " + localStorage.getItem("password"));
    console.log("localStorage.remember: " + localStorage.getItem("remember"));
    router.push("/CookDashBoard"); //页面跳转第三步：页面跳转
  } else {
    //后厨登录失败
    ElMessage.error("后厨账号或密码错误~_~");
  }
};

const adminLoginHandler = () => {
  //管理员账号密码写死
  if (admin.account == "admin" && admin.password == "123456") {
    ElMessage({
      message: "管理员登录成功^_^",
      type: "success",
    });
    if (admin.remember) {
      localStorage.setItem("account", admin.account);
      localStorage.setItem("password", admin.password);
      localStorage.setItem("remember", admin.remember ? 1 : 0);
    } else {
      localStorage.setItem("account", "");
      localStorage.setItem("password", "");
      localStorage.setItem("remember", cook.remember ? 0 : 1);
    }

    router.push("/AdminDashBoard"); //页面跳转第三步：页面跳转
  } else {
    ElMessage.error("糟糕, 管理员账号或密码错误-_-");
  }
};
</script>

<style lang="scss" scoped>
.登录主卡片 {
  position: absolute;
  width: 464px;
  height: 436px;
  left: 550px;
  top: 130px;
  box-sizing: border-box;

  border: 2px solid rgba(63, 151, 255, 0.63);
  border-radius: 26px;

  /* 自动布局 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 36px 42px 0px 42px;
}

.登录文本 {
  /* 登录 */
  position: absolute;
  width: 226px;
  height: 93px;
  left: 56px;
  right: 282px;
  top: -10px;
  bottom: 389px;

  color: rgb(51, 51, 51);
  font-family: 微软雅黑;
  font-size: 40px;
  font-weight: 700;
  line-height: 66px;
  letter-spacing: 0%;
  text-align: left;

  display: flex;
  flex-direction: row;
  align-items: center;
}

.logo {
  /* 椭圆 1 */
  position: absolute;
  width: 85px;
  height: 85px;
  left: 325px;
  right: 54px;
  top: 35px;
  bottom: 389px;
}

.账号输入框 {
  border-radius: 26px;
  position: absolute;
  width: 360px;
  height: 35px;
  left: 56px;
  right: 67px;
  top: 150px;
  bottom: 301px;
}
.密码输入框 {
  border-radius: 26px;
  position: absolute;
  width: 360px;
  height: 35px;
  left: 56px;
  right: 67px;
  top: 220px;
  bottom: 301px;
}
.记住我 {
  position: absolute;
  left: 56px;
  right: 67px;
  top: 270px;
  bottom: 301px;
}
.后厨登录按钮 {
  position: absolute;
  width: 360px;
  height: 40px;
  left: 56px;
  right: 67px;
  top: 310px;
  bottom: 301px;
}
.后厨登录文本 {
  color: rgb(255, 255, 255);
  font-family: Poppins;
  font-size: 17px;
  font-weight: 550;
  line-height: 30px;
  letter-spacing: 0%;
  text-align: center;
}
.管理员登录按钮 {
  position: absolute;
  width: 360px;
  height: 40px;
  left: 45px;
  right: 67px;
  top: 370px;
  bottom: 301px;

  border: 1px solid rgba(63, 151, 255, 0.5);
}
.管理员登录文本 {
  color: rgb(17, 17, 17);
  // font-family: Poppins;
  font-size: 16px;
  font-weight: 550;
  line-height: 30px;
  letter-spacing: 0%;
  text-align: center;
}
.管理员logo {
  position: absolute;
  width: 16px;
  height: 16px;
  left: 117px;
  top: 10px;
}
</style>
